<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>网易新闻</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body ng-app="App">
		<!--顶部导航-->
		<header class="mui-bar mui-bar-nav">
			<img src="img/logo.png" alt="" class="logo_img"/>
			<a class="mui-tab-item tiaozhuanzhibo" href="#tabbar-with-chat"><img src="img/zhibo_logo.png" /></a>
			<span class="cd_zhibo_remen">热门</span>
		</header>
		<!--底部导航-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar" id="a_xinwen">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">新闻</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat" id="a_zhibo">
				<span class="mui-icon mui-icon-videocam"></span>
				<span class="mui-tab-label">直播</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">话题</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active" ng-controller="myController">
				<!--新闻页面-->
				<div class="mui-content">
					<div id="slider" class="mui-slider">
						<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="background-color: rgb(244,244,244);border-bottom: 1px solid rgb(169,169,169);">
							<a class="mui-control-item mui-active" href="#item1mobile">
								头条
							</a>
							<a class="mui-control-item" href="#item2mobile">
								精选
							</a>
							<a class="mui-control-item" href="#item3mobile">
								娱乐
							</a>
							<a class="mui-control-item" href="#item4mobile">
								体育
							</a>
							<a class="mui-control-item" href="#item5mobile">
								军事
							</a>
							<a class="mui-control-item" href="#item6mobile">
								历史
							</a>
						</div>
						<div class="mui-slider-group" style="top: 83px;position: relative;	">
							<div id="item1mobile" class="mui-slider-item mui-control-content mui-control-content mui-active" style="background-color: rgb(244,244,244);">
								<!--小图滚动-->
								<div class="cd_xiaotugundong">
									<div id="slider" class="mui-slider">
										<div class="mui-slider-group mui-slider-loop">
											<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
											<div class="mui-slider-item mui-slider-item-duplicate">
												<a href="#">
													<img src="{{first.imgsrc}}">
												</a>
											</div>
											<div class="mui-slider-item" ng-repeat="aa in objlunbo">
												<a href="#">
													<img src="{{aa.imgsrc}}">
													<p class="mui-slider-title">{{aa.title}}</p>
												</a>
											</div>
											<div class="mui-slider-item mui-slider-item-duplicate">
												<a href="#">
													<img src="{{last.imgsrc}}">
												</a>
											</div>
										</div>
										<div class="mui-slider-indicator">
											<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="aa in objlunbo track by $index"></div>
										</div>
									</div>
								</div>
								<!--新闻获取-->
								<div class="cd_page1_text">
									<ul>
										<li ng-repeat="aa in objPage1Text" class="cd_page1_text_0" style="position: relative;list-style: none;">
											<a href="{{aa.url}}" style="text-decoration: none;outline: none;">
												<img src="{{aa.imgsrc}}" style="width:35%;" />
												<p style="width:60%;display: inline-block;margin: 0;font-size:18px;position: absolute;top: 0;color:black;font-family: '微软雅黑';font-weight: 600;">{{aa.title}}</p>
												<span style="color:rgb(169,169,169);position: absolute;bottom: 0;right: 0;font-family: '微软雅黑';font-weight: 200;">{{aa.replyCount}}跟帖</span>
												<br />
											</a>
										</li>
									</ul>
								</div>
							</div>
							<div id="item2mobile" class="mui-slider-item mui-control-content" style="background-color: rgb(244,244,244);">
								<!--精选第二页-->
								<div class="mui-slider-item">
									<a href="#">
										<img ng-src="{{page2.imgsrc}}">
										<p class="mui-slider-title">{{page2.title}}</p>
									</a>
								</div>
								<ul>
									<li ng-repeat="aa in page2Text" style="position: relative;list-style: none;" class="cd_li">
										<a href="{{aa.url}}">
											<p ng-class="{true:'page2p',false:'page2p_spec'}[aa.active]" style="color:black;font-family: '微软雅黑';font-weight: 600;font-size: 18px;">{{aa.title}}</p>
											<img ng-src="{{aa.imgsrc}}" ng-class="{true:'page2img1',false:'page2img1_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[0].imgsrc}}" ng-class="{true:'page2img2',false:'page2img2_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[1].imgsrc}}" ng-class="{true:'page2img3',false:'page2img3_spec'}[aa.active]" />
											<span ng-class="{true:'page2span1',false:'page2span1_spec'}[aa.active]" style="color: rgb(169,169,169);font-family: '微软雅黑';font-size: 12px;">{{aa.source}}</span>
											<span ng-class="{true:'page2span2',false:'page2span2_spec'}[aa.active]" style="color:rgb(169,169,169);font: '微软雅黑';font-size: 12px;">{{aa.replyCount}}跟帖</span>
										</a>
									</li>
								</ul>
							</div>
							<div id="item3mobile" class="mui-slider-item mui-control-content" style="background-color: rgb(244,244,244);">
								<!--图滚动-->
								<div class="cd_xiaotugundong">
									<div id="slider" class="mui-slider">
										<div class="mui-slider-group mui-slider-loop">
											<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
											<div class="mui-slider-item mui-slider-item-duplicate">
												<a href="#">
													<img src="{{imgsrc32}}">
												</a>
											</div>
											<div class="mui-slider-item">
												<a href="#">
													<img src="{{imgsrc31}}">
													<p class="mui-slider-title">{{title31}}</p>
												</a>
											</div>
											<div class="mui-slider-item">
												<a href="#">
													<img src="{{imgsrc32}}">
													<p class="mui-slider-title">{{title32}}</p>
												</a>
											</div>
											<div class="mui-slider-item mui-slider-item-duplicate">
												<a href="#">
													<img src="{{imgsrc31}}">
												</a>
											</div>
										</div>
										<div class="mui-slider-indicator">
											<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]"></div>
											<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]"></div>
										</div>
									</div>
								</div>
								<!--下方获取数据-->
								<ul>
									<li ng-repeat="aa in page3Text" style="position: relative;list-style: none;" class="cd_li">
										<a href="{{aa.url}}">
											<p ng-class="{true:'page2p',false:'page2p_spec'}[aa.active]" style="color:black;font-family: '微软雅黑';font-weight: 600;font-size: 18px;">{{aa.title}}</p>
											<img ng-src="{{aa.imgsrc}}" ng-class="{true:'page2img1',false:'page2img1_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[0].imgsrc}}" ng-class="{true:'page2img2',false:'page2img2_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[1].imgsrc}}" ng-class="{true:'page2img3',false:'page2img3_spec'}[aa.active]" />
											<span ng-class="{true:'page2span1',false:'page2span1_spec'}[aa.active]" style="color: rgb(169,169,169);font-family: '微软雅黑';font-size: 12px;">{{aa.source}}</span>
											<span ng-class="{true:'page2span2',false:'page2span2_spec'}[aa.active]" style="color:rgb(169,169,169);font: '微软雅黑';font-size: 12px;">{{aa.replyCount}}跟帖</span>
										</a>
									</li>
								</ul>
							</div>
							<div id="item4mobile" class="mui-slider-item mui-control-content" style="background-color: rgb(244,244,244);">
								<!--第四页 体育-->
								<div class="cd_xiaotugundong">
									<div id="slider" class="mui-slider">
										<div class="mui-slider-group mui-slider-loop">
											<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
											<div class="mui-slider-item mui-slider-item-duplicate">
												<a href="#">
													<img src="{{imgsrc42}}">
												</a>
											</div>
											<div class="mui-slider-item">
												<a href="#">
													<img src="{{imgsrc41}}">
													<p class="mui-slider-title">{{title41}}</p>
												</a>
											</div>
											<div class="mui-slider-item">
												<a href="#">
													<img src="{{imgsrc42}}">
													<p class="mui-slider-title">{{title42}}</p>
												</a>
											</div>
											<div class="mui-slider-item mui-slider-item-duplicate">
												<a href="#">
													<img src="{{imgsrc41}}">
												</a>
											</div>
										</div>
										<div class="mui-slider-indicator">
											<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]"></div>
											<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]"></div>
										</div>
									</div>
								</div>

								<ul>
									<li ng-repeat="aa in page4Text" style="position: relative;list-style: none;" class="cd_li">
										<a href="{{aa.url}}">
											<p ng-class="{true:'page2p',false:'page2p_spec'}[aa.active]" style="color:black;font-family: '微软雅黑';font-weight: 600;font-size: 18px;">{{aa.title}}</p>
											<img ng-src="{{aa.imgsrc}}" ng-class="{true:'page2img1',false:'page2img1_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[0].imgsrc}}" ng-class="{true:'page2img2',false:'page2img2_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[1].imgsrc}}" ng-class="{true:'page2img3',false:'page2img3_spec'}[aa.active]" />
											<span ng-class="{true:'page2span1',false:'page2span1_spec'}[aa.active]" style="color: rgb(169,169,169);font-family: '微软雅黑';font-size: 12px;">{{aa.source}}</span>
											<span ng-class="{true:'page2span2',false:'page2span2_spec'}[aa.active]" style="color:rgb(169,169,169);font: '微软雅黑';font-size: 12px;">{{aa.replyCount}}跟帖</span>
										</a>
									</li>
								</ul>

							</div>
							<div id="item5mobile" class="mui-slider-item mui-control-content" style="background-color: rgb(244,244,244);">
								<!--第五页 军事-->
								<ul>
									<li ng-repeat="aa in page5Text" style="position: relative;list-style: none;" class="cd_li">
										<a href="{{aa.url}}">
											<p ng-class="{true:'page2p',false:'page2p_spec'}[aa.active]" style="color:black;font-family: '微软雅黑';font-weight: 600;font-size: 18px;">{{aa.title}}</p>
											<img ng-src="{{aa.imgsrc}}" ng-class="{true:'page2img1',false:'page2img1_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[0].imgsrc}}" ng-class="{true:'page2img2',false:'page2img2_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[1].imgsrc}}" ng-class="{true:'page2img3',false:'page2img3_spec'}[aa.active]" />
											<span ng-class="{true:'page2span1',false:'page2span1_spec'}[aa.active]" style="color: rgb(169,169,169);font-family: '微软雅黑';font-size: 12px;">{{aa.source}}</span>
											<span ng-class="{true:'page2span2',false:'page2span2_spec'}[aa.active]" style="color:rgb(169,169,169);font: '微软雅黑';font-size: 12px;">{{aa.replyCount}}跟帖</span>
										</a>
									</li>
								</ul>

							</div>
							<div id="item6mobile" class="mui-slider-item mui-control-content" style="background-color: rgb(244,244,244);">
								<ul>
									<li ng-repeat="aa in page6Text" style="position: relative;list-style: none;" class="cd_li">
										<a href="{{aa.url}}">
											<p ng-class="{true:'page2p',false:'page2p_spec'}[aa.active]" style="color:black;font-family: '微软雅黑';font-weight: 600;font-size: 18px;">{{aa.title}}</p>
											<img ng-src="{{aa.imgsrc}}" ng-class="{true:'page2img1',false:'page2img1_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[0].imgsrc}}" ng-class="{true:'page2img2',false:'page2img2_spec'}[aa.active]" />
											<img ng-src="{{aa.imgextra[1].imgsrc}}" ng-class="{true:'page2img3',false:'page2img3_spec'}[aa.active]" />
											<span ng-class="{true:'page2span1',false:'page2span1_spec'}[aa.active]" style="color: rgb(169,169,169);font-family: '微软雅黑';font-size: 12px;">{{aa.source}}</span>
											<span ng-class="{true:'page2span2',false:'page2span2_spec'}[aa.active]" style="color:rgb(169,169,169);font: '微软雅黑';font-size: 12px;">{{aa.replyCount}}跟帖</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="tabbar-with-chat" class="mui-control-content" ng-controller="myController2" style="position: relative;top: 44px;background-color: rgb(244,244,244);">
			  	<!--小图滚动-->
				<div class="cd_xiaotugundong">
					<div id="slider" class="mui-slider">
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="{{first.image}}">
									<p class="mui-slider-title">{{first.roomName}}</p>
								</a>
							</div>
							<div class="mui-slider-item" ng-repeat="aa in obj_2lunbo" style="position: relative;">
								<a href="#">
									<img src="{{aa.image}}">
									<p class="mui-slider-title">{{aa.roomName}}</p>
								</a>
							</div>
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="{{last.image}}">
									<p class="mui-slider-title">{{last.roomName}}</p>
								</a>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="aa in obj_2lunbo track by $index"></div>
						</div>
					</div>
				</div>
				<div class="mui-content">
				<div class="mui-card">
				<ul class="mui-table-view">					
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#"style="color: black;font-family: '微软雅黑';font-weight: 500;font-size: 16px;"><span style="color:skyblue;font-size: 18px;font-family: '微软雅黑';font-weight: 200;">预告/</span>{{yugaoFirst.roomName}}</a>
						<div class="mui-collapse-content">
							<p style="color: black;font-family: '微软雅黑';font-weight: 500;font-size: 14px;border-bottom: 1px dashed rgb(169,169,169);" ng-repeat="aa in yugao">
								{{aa.roomName}}
								<span style="color:rgb(169,169,169);font-size: 12px;font-family: '微软雅黑';font-weight: 200;">{{aa.startTime}}</span>
							</p>
						</div>
					</li>
				</ul>
			</div>
				</div>
				<ul>
					<li style="position: relative;" ng-repeat="obj2Ul in obj2Ul_js">
						<img src="{{obj2Ul.image}}" alt="" style="width: 100%;"/>
						<p style="position: absolute;bottom: 30%;left: 0;color: white;font-family: '微软雅黑';font-weight: 600;font-size: 22px;">{{obj2Ul.roomName}}</p>
						<img src="img/live.png" style="position: absolute;left: 0%;bottom: 13%;width:12%;"/>
						<span style="position: absolute;bottom: 12%;left:14%;color:white;border:1px solid white;font-family: '微软雅黑';font-size: 14px;font-weight: 800;line-height: 17px;">{{obj2Ul.userCount}}参与</span>
						<br />
						<br />
					</li>
				</ul>
				
				
			</div>
			<div id="tabbar-with-contact" class="mui-control-content">

			</div>
			<div id="tabbar-with-map" class="mui-control-content">

			</div>
		</div>

		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>